<template>
  <div class="box">
    <el-form
        :rules="rules"
        v-loading="loading"
        element-loading-text="正在注册"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        ref="roleForm"
        :model="roleForm"
        class="roleContainer"
    >
      <h3 class="roleTitle">账号注册</h3>
      <el-form-item prop="username">
        <el-input
            type="text"
            auto-complete="false"
            v-model="roleForm.username"
            placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            type="password"
            auto-complete="false"
            v-model="roleForm.password"
            placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
            type="code"
            auto-complete="false"
            v-model="roleForm.code"
            placeholder="请输入通行号"
        ></el-input>
      </el-form-item>
      <el-button type="primary" style="width: 100%" @click.prevent="submitRegister">注册</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      roleForm: {
        username: "",
        password: "",
        code: ""
      },
      loading: false,
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        code: [{required: true, message: "请输入通行号", trigger: "blur"}]
      },
    }
  },
  methods: {
    submitRegister() {
      this.$message.info("测试注册");
    }
  }
}
</script>

<style>
.roleContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.roleTitle {
  color: #1E90FF;
  margin: 0px auto 40px auto;
  text-align: center;
}

.el-form-item__content {
  display: flex;
  align-items: center;
}

.box {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #48D1CC;
}
</style>

